<template>
  <div id="member" class="wrapper-fixed">
    <div class="action-bar-wrapper">
      <el-col :span="24" class="action-bar">
        <el-input v-model="searchText" placeholder="输入关键字" style="width:300px;"></el-input>
        <el-date-picker
          v-model="startTime"
          type="datetime"
          style="width: 200px;margin: 0 20px"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择开始时间">
        </el-date-picker>
        <div style="color: #999999">
          ——
        </div>

        <el-date-picker
          v-model="endTime"
          type="datetime"
          style="width: 200px;margin: 0 20px"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择结束时间">
        </el-date-picker>
        <el-select v-model="status" clearable placeholder="审核状态" style="margin:0 20px;">
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" size="medium" @click="search">检索</el-button>
      </el-col>
<!--      <el-col class="action-bar screen">-->
<!--        <el-checkbox label="活动费用" name="fee" v-model="showColumns.fee"></el-checkbox>-->
<!--        &lt;!&ndash; <el-checkbox label="活动方类型" name="type" v-model="showColumns.type"></el-checkbox> &ndash;&gt;-->
<!--        <el-checkbox label="浏览" name="view" v-model="showColumns.view"></el-checkbox>-->
<!--        <el-checkbox label="关注" name="follow" v-model="showColumns.follow"></el-checkbox>-->
<!--      </el-col>-->
    </div>

    <!-- 列表 -->
    <el-table
      :data="commentList"
      v-loading="tableLoadingShow"
      element-loading-text="拼命加载中"
      style="width: 100%">
      <el-table-column type="index" min-width="50"></el-table-column>
      <el-table-column prop="content" label="内容" min-width="50" show-overflow-tooltip>
        <template slot-scope="scope">
          <span @click.stop="showComment(scope.row)"
                style="cursor:pointer;color:#409EFF;width:100%;whiteSpace:nowrap;overflow:hidden;textOverflow:ellipsis">{{scope.row.content}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="comment_name" label="需求/资讯" min-width="100">
        <template slot-scope="scope">
          <span @click.stop="showCommentName(scope.row)"
                style="cursor:pointer;color:#409EFF;width:100%;whiteSpace:nowrap;overflow:hidden;textOverflow:ellipsis">{{scope.row.comment_name}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="type_name" label="类型" min-width="50">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.type_name=='资讯'">{{scope.row.type_name}}</el-tag>
          <el-tag v-else>{{scope.row.type_name}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="comment_type_name" label="评论/回复" min-width="80">
        <template slot-scope="scope">
          <el-tag type="danger" v-if="scope.row.comment_type_name=='回复'">{{scope.row.comment_type_name}}</el-tag>
          <el-tag type="warning" v-else>{{scope.row.comment_type_name}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="发布时间" min-width="100"></el-table-column>
      <el-table-column prop="user_info.nickname" label="评论者" min-width="100"></el-table-column>
      <el-table-column label="审核状态" min-width="80">
        <template slot-scope="scope">
          <el-tag v-show="scope.row.status==0">未审核</el-tag>
          <el-tag type="success" v-show="scope.row.status==1">已通过</el-tag>
          <el-tag type="info" v-show="scope.row.status==2">已拒绝</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="200">
        <template slot-scope="scope">
          <el-button size="mini" type='primary' v-if="scope.row.status=='0'" @click="passComment(scope.row.id)">通过</el-button>
          <el-button size="mini" type='danger' v-if="scope.row.status=='0'" @click="denyComment(scope.row.id)">拒绝</el-button>
          <el-button size="mini" type='danger' @click="deleteComment(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-col :span="24" class="footer-bar">
      <div class="page-code">
        <el-pagination
          background
          :page-size="limit"
          layout="prev, pager, next"
          :total="totalPage"
          :current-page="page"
          @current-change="pageChange"
        >
        </el-pagination>
      </div>
    </el-col>
    <!-- 列表end -->

    <!-- 评论弹窗 -->
    <el-dialog title="详情" :visible.sync="commentVisible" @close="initData">
      <div>{{comment}}</div>
    </el-dialog>
    <!-- 评论弹窗end -->
  </div>
</template>

<script>
  export default {
    name: "comment_manage",
    data(){
      return{
        commentVisible: false, //评论弹窗
        searchText:'', //搜索关键词
        startTime: '', //开始时间
        endTime: '', //结束时间
        statusList: [
            {label: '未审核',value: 0},
            {label: '已通过',value: 1},
            {label: '已拒绝',value: 2}
          ],
        status: '', //审核筛选
        totalPage: 0, //评论总数
        limit: 10, //单页评论限制数
        page: 1, //当前评论页数
        commentList: [], //评论数据
        comment: '', //评论详情
        tableLoadingShow: false
      }
    },
    mounted(){
      this.getAllCommentList();
    },
    methods:{
      search(){
        this.tableLoadingShow = true;
        this.page = 1;
        this.getAllCommentList();
      },
      showComment(item){
        this.comment = item.content;
        this.commentVisible = true;
      },
      showCommentName(item){
        this.comment = item.comment_name;
        this.commentVisible = true;
      },
      //获取评论列表
      async getAllCommentList(){
        let params = {
          page: this.page,
          limit: this.limit,
          keyword: this.searchText,
          start_time: this.startTime,
          end_time: this.endTime,
          status: this.status
        }
        const res = await this.$api.getAllCommentList(params);
        if (res.data.level == 'success'){
          this.commentList = res.data.data;
          this.totalPage = res.data.page_info.total;
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
        this.tableLoadingShow = false;
      },
      //翻页
      pageChange(e) {
        this.page = e;
        this.getAllCommentList();
      },
      //评论通过
      async passComment(id) {
        //通过审核
        let judge = null;
        let tit = '通过该评论?';
        try {
          judge = await this.$confirm(tit, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch (error) {
          judge = 'cancel'
        }
        if (judge == 'confirm') {
          this.reviewComment(1, id)
        }
      },
      //拒绝评论
      async denyComment(id) {
        let judge = null;
        let tit = '拒绝该评论?';
        try {
          judge = await this.$confirm(tit, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch (error) {
          judge = 'cancel'
        }
        if (judge == 'confirm') {
          this.reviewComment(2, id)
        }
      },
      //审核评论
      async reviewComment(type, id) {
        let params = {
          comment_id: id,
          type: type
        }
        let res = await this.$api.reviewComment(params)
        if (res.data.level == 'success') {
          this.$message.success(res.data.message);
          this.getAllCommentList()
        } else {
          this.$message.error(res.data.message);
        }
      },
      //删除评论
      async deleteComment(id) {
        //删除评论
        let judge = null;
        let tit = '删除该评论?'
        try {
          judge = await this.$confirm(tit, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch (error) {
          judge = 'cancel'
        }
        if (judge == 'confirm') {
          this.delCommentHandle(id)
        }
        // console.log(judge)
      },
      async delCommentHandle(id) {
        let res = await this.$api.delComment({id: id});
        if (res.data.level == 'success') {
          this.$message.success(res.data.message);
          this.getAllCommentList()
        } else {
          this.$message.error(res.data.message);
        }
      },
      initData(){

      }
    }
  }
</script>

<style lang="scss" scoped>
  .screen {
    margin-top: -10px !important;
  }

  .action-bar-wrapper {
    position: sticky;
    z-index: 1;
    top: -10px;
  }

  .action-bar {
    background-color: #f2f2f2;

    height: 60px;
    margin: 10px 0px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-left: 20px;

    .action-bar-input {
      width: 250px;
      margin-right: 14px;
    }

    .task-form-text {
      color: #666666;
    }
  }

  .el-table-style {
    width: 100%;
    border: 1px solid #f2f2f2;
  }

  .footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f2f2f2;
    padding: 8px;
    margin: 10px 0px;
    box-sizing: border-box;
  }

  .dialog-footer {
    text-align: center;
  }

  .executorList {
    display: flex;
    flex-wrap: wrap;

    div {
      margin: 10px;
      border: 1px solid #eee;
      border-radius: 5px;
      padding: 5px 10px;
    }
  }
</style>
<style>
  .rich-text img {
    max-width: 80%;
  }
</style>
